<template>
  <div>
      <div class="about">
        <div class="container">
            
            <van-tabs v-model="active"  animated title-active-color=#ef3926 line-width=20px 
            sticky swipeable :offset-top="0">
              <van-tab 
              v-for="item in Tab" :key="item" 
              :title="item" 
              title-style=font-weight:bold;font-size:15px
              >
              <div class="banner">
               <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                  <van-swipe-item v-for="(item,index) in Img" :key="index">
                    <div class="bannerbox">
                      <router-link tag="div" :to="'/details?id='+item.id" class="imgbox">
                        <img class="auto-img" :src="item.img" alt="">
                      </router-link>
                      <p>{{item.title}}</p>
                    </div>
                    
                  </van-swipe-item>
                  
                </van-swipe>
             </div>  
              <lists-page-two></lists-page-two>
              </van-tab>
              
            </van-tabs>
            
            <div class="nullbox"></div>
           <banner-list></banner-list>
        </div>
    </div> 
  </div>
</template>

<script>
import bannerList from '../components/bannerList.vue';

import listsPageTwo from '../components/listsPageTwo.vue';
import {getImg} from '../api/lists';
export default {
  data() {
    return {
      active: 0,
      Tab:['思想者','强国文学','青年学习'],
      Img:null
    };
  },
    methods:{
      getImgFun(){
        getImg().then(data=>{
          console.log(data);
          this.Img=data.image;
        })
      }
    },
    created(){
      this.getImgFun();
    },
    components:{
      bannerList,
      listsPageTwo
    }
}
</script>

<style lang="scss">
.about .box_header,
.about .box_foot{
  padding-left: 13px;
  padding-right: 10px;
}
.van-tabs .van-tabs__wrap{
  padding-bottom: 5px;
 
}
.about {
  
  .box_header {
    margin-top: 2px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #fff;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 10px;
    z-index: 20;
    .nav {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      font-size: 15px;
      & > ul {
        display: flex;
        flex: 1;
        padding-left: 6px;
        justify-content: space-evenly;
        & > li {
          font-weight: 600;
          color: #7b7b7b;
          &.con {
            color: #ef3926;
          }
          &:hover {
            color: #ef3926;
            & > div {
              background-color: #ef3926;
            }
          }
          & > div {
            margin: 0 auto;
            margin-top: 9px;
            width: 20px;
            height: 3px;
            border-radius: 1px;
            &.con {
              background-color: #ef3926;
            }
          }
        }
      }
    }
    .navmain {
      margin-bottom: 18px;
      font-size: 15px;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          font-weight: bold;
          &.con {
            color: #606060;
            font-weight: bold;
          }
        }
      }
    }
  }
  .box_foot {
    ul {
      li {
        margin-top: 20px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        .titlebox {
          margin-right: 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title {
            font-weight: bold;
            margin-bottom: 16px;
            font-size: 17px;
          }
          .subtitle {
            span {
              color: #747474;
              font-weight: bold;
              font-size: 12px;
              &.con {
                color: red;
                font-size: 12px;
                font-weight: bold;
                margin-right: 5px;
              }
            }
          }
        }
        .imgbox {
          flex: 0.7;
          border-radius: 6px;
          overflow: hidden;
        }
      }
    }
  }
  footer {
    .great {
      .imgbox {
        width: 44px;
        height: 42px;
        background: url(../assets/img/icon_book_selected.png) no-repeat 0 -2px;
      }
    }
    & > div {
      &:nth-child(2) {
        a {
          color: red;
        }
      }
    }
  }
  ol {
    list-style: none;
  }
  .banner{
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 18px;
    
    .bannerbox{
      margin-top: 5px;
      position: relative;
      padding: 0 13px; 
     
      .imgbox{
        border-radius: 8px;
        overflow: hidden;
        height: 200px;
      }
      p{
        letter-spacing: 2px;
        font-weight: bold;
        position: absolute;
        bottom: 20px;
        left: 30px;
        right: 30px;
      }
    }
    
    

  }
  }
}
.about .box_header .navmain ul li,
.about .box_header .navmain ul span {
  color: #939393;
}
.about .box_header .navmain ul li:hover,
.about .box_header .navmain ul span:hover {
  color: #606060;
  font-weight: bold;
}

</style>